<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 卡片区域 -->
      <el-card shadow="never">
        <!-- 搜索框区域 -->
        <div class="search-box">

          <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="fromData">

            <el-form-item label="关键字" style="margin-right:30px">
              <el-input v-model="formInline.keyword" placeholder="根据文章标题搜索"></el-input>
            </el-form-item>

            <el-form-item label="状态">
              <el-select v-model="formInline.state" placeholder="请选择">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button size="small" @click="clearFn">清除</el-button>
              <el-button type="primary" size="small" @click="searchFn">搜索</el-button>
            </el-form-item>
          </el-form>

          <el-button class="filter-item btn-pub" size="small" style="" type="success" icon="el-icon-edit" @click="addEssayFn">新增技巧</el-button>
        </div>

        <!-- 数据记录 show-icon表示提示的是否带图标-->
        <el-alert :title="`数据共有${count}条`" type="info" class="alert" :closable="false" show-icon></el-alert>

        <!--表格 -->
        <el-table :data="tableData" style="width: 100%" fit highlight-current-row>

          <el-table-column type="index" label="序号" width="60">
          </el-table-column>

          <el-table-column prop="title" label="文章标题" width="300">
            <template v-slot="{row}">
              <span>{{row.title}}</span>
              <span>
                <!-- 如果row.videoURL有值那么显示这个标签 -->
                <a v-if="row.videoURL" href="#" class="el-icon-film" @click="showVideoFn(row)">
                </a>
              </span>
            </template>
          </el-table-column>

          <el-table-column prop="visits" label="阅读数">
          </el-table-column>

          <el-table-column prop="username" label="录入人">
          </el-table-column>

          <el-table-column prop="createTime" label="录入时间">
          </el-table-column>

          <el-table-column prop="state" label="状态">
            <template v-slot="{row}">
              <span>
                {{formOfEmploymentFn(row.state)}}
              </span>
            </template>
          </el-table-column>

          <el-table-column fixed="right" label="操作" width="180">
            <template slot-scope="scope">

              <el-button @click="viewFn(scope.row)" type="text" size="small">预览</el-button>

              <!-- 如果状态为0那么是禁用所以true -->
              <el-button v-if="scope.row.state==0?true:false" type="text" size="small" @click="startFn(scope.row)">启用</el-button>

              <el-button v-else type="text" size="small" @click="disableFn(scope.row)">禁用</el-button>

              <!-- 如果状态为0那么就禁用 如果为状态为不为0那么就不禁止 -->
              <el-button type="text" size="small" :disabled="scope.row.state==0?true:false" @click="isEditFn(scope.row.id)">修改</el-button>

              <el-button type="text" size="small" :disabled="scope.row.state==0?true:false" @click="delFn(scope.row.id)">删除</el-button>

            </template>
          </el-table-column>

        </el-table>

        <!-- 分页区域 -->
        <div class="pagination">
          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="params.page" :page-size="params.pagesize" layout="prev, pager, next, sizes,jumper" :page-sizes="[2, 5,10]" :total="count">
          </el-pagination>
        </div>

        <!-- 预览弹框 -->
        <ArticlesPreview :dialogVisible.sync="showDeparDialog" :PreviewTable="detailsData"></ArticlesPreview>
      </el-card>

      <!-- 新增弹框 -->
      <ArticlesAdd ref="perDialog" :dialogVisible.sync="showadddialogVisible" @FormDate="FormDateFn"></ArticlesAdd>
    </div>

    <!-- 遮罩层播放视频 -->
    <div class="video-preview" v-show="showVideo===true?true:false">
      <div class="close" @click="closeFn">
        <span class="el-icon-close"></span>
      </div>

      <div class="box">
        <video :src="videoURL" autoplay="autoplay"></video>
      </div>
    </div>
  </div>

</template>
<script>
import { status } from '@/api/hmmm/constants'
import { list, changeState, add, remove, detail, update } from '@/api/hmmm/articles.js'
import { parseTime } from '@/utils/index.js'
import ArticlesPreview from '@/module-hmmm/components/articles-preview.vue'
import ArticlesAdd from '@/module-hmmm/components/articles-add.vue'
export default {
  name: 'Articles',
  data () {
    return {
      // 分页数据
      params: {
        page: 1,
        pagesize: 10
      },
      computed: {
        status () {
          return status
        }
      },
      count: 0, // 总条数
      formInline: {
        // 渲染的简单状态列表
        keyword: '',
        state: ''
      },
      tableData: [], // 表格数据
      showDeparDialog: false, // 展示弹框
      detailsData: {}, // 具体id的详情数据
      videoURL: null, // 视频链接
      showVideo: false, // 控制遮罩层
      showadddialogVisible: false, // 新增/编辑弹框
      isEdit: false // 编辑状态
    }
  },
  components: {
    ArticlesPreview,
    ArticlesAdd
  },
  created () {
    this.ListFn()
  },
  methods: {
    // 获取列表数据
    async ListFn () {
      const { data } = await list(this.params)
      // console.log(data)
      // 转换时间
      data.items.forEach(item => {
        item.createTime = parseTime(item.createTime)
      })
      this.count = data.counts
      this.tableData = data.items
    },

    // 使用函数->对象表示值的内容转变
    formOfEmploymentFn (num) {
      // console.log(num)
      const obj = {
        1: '已启用',
        0: '已禁用'
      }
      return obj[num]
    },

    // 当前条数
    handleSizeChange (val) {
      this.params.pagesize = val
      this.ListFn()
    },

    // 当前页码
    handleCurrentChange (val) {
      this.params.page = val
      this.ListFn()
    },

    // 点击预览
    async viewFn (row) {
      // console.log(row)
      this.showDeparDialog = true
      row.createTime = parseTime(row.createTime)
      this.detailsData = row
      // console.log(this.detailsData)
    },

    // 点击清除
    clearFn () {
      this.formInline = {}
    },

    // // 点击启用按钮
    async startFn (row) {
      // 状态是启用
      row.state = 1
      const res = await changeState({ id: row.id, state: row.state })
      // console.log(res)
      // 如果成功那么提示
      if (res.status === 200) {
        this.$message({
          message: '已启用',
          type: 'success'
        })
      }
      this.ListFn()
    },

    // 点击禁用按钮
    async disableFn (row) {
      row.state = 0
      const res = await changeState({ id: row.id, state: row.state })
      if (res.status === 200) {
        this.$message({
          message: '已禁用',
          type: 'warning'
        })
      }
      this.handleSizeChange(this.params.pagesize)
      this.ListFn()
    },

    // 搜索-多增加两个参数关键字和状态
    async searchFn () {
      // 参数
      // console.log(this.formInline)
      const { data } = await list({ ...this.params, ...this.formInline })
      // console.log(data)
      // 转换时间
      data.items.forEach(item => {
        item.createTime = parseTime(item.createTime)
      })
      this.count = data.counts
      this.tableData = data.items
    },

    // 点击视频弹出遮罩层自动播放视频
    showVideoFn (row) {
      this.videoURL = row.videoURL
      // console.log(this.videoURL)
      this.showVideo = true
    },

    // 弹出层关闭
    closeFn () {
      this.showVideo = false
      // console.log(123)
    },

    // 新增技巧弹出层出现
    addEssayFn () {
      this.isEdit = false
      this.showadddialogVisible = true
    },

    // 调用接口发送新增的数据
    async FormDateFn (ruleForm) {
      // 如果this.isEdit为false 是新增
      if (!this.isEdit) {
        const data = await add(ruleForm)
        // console.log(data)
        if (data.status === 200) {
          this.$message({
            message: '新增成功',
            type: 'success'
          })
        }
      } else {
        const data = await update(ruleForm)
        // console.log(data)
        if (data.status === 200) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
        }
      }
      this.ListFn()
    },

    // 修改
    async isEditFn (id) {
      this.isEdit = true
      const res = await detail({ id: id })
      // console.log(res)
      this.$refs.perDialog.ruleForm = res.data
      this.showadddialogVisible = true
    },

    // 删除数据
    async delFn (id) {
      try {
        // 提示是异步任务所有需要使用await
        await this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          type: 'warning'
        })
        // 如果点击了确定那么就调用接口删除数据
        const data = await remove({ id: id })
        // console.log(data)
        // 弹出提示删除成功
        if (data.status === 200) {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
        }
        // 优化删除 如果当前的页码大于1 且当前的数据长度为0那么就让页码-1
        if (this.tableData.length === 1) {
          this.params.page--
          if (this.params.page < 1) {
            this.params.page = 1
          }
        }
        this.ListFn()
      } catch (e) {
        this.$message({
          message: '取消删除',
          type: 'success'
        })
      }
    }
  }
}
</script>

<style scoped >
.search-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.btn-pub {
  margin-top: 3px;
}
.pagination {
  margin-top: 10px;
  text-align: right;
}
.el-icon-film {
  margin-left: 10px;
  color: #00f;
  font-size: 18px;
}
.video-preview {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  overflow: hidden;
  z-index: 9999;
}
.close {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 30px;
  left: 50%;
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
  background: rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: 0 0 5px rgb(0 0 0 / 40%);
  box-shadow: 0 0 5px rgb(0 0 0 / 40%);
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
  color: #fff;
  font-size: 20px;
  z-index: 999999999;
}
.box {
  width: 800px;
  height: 600px;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
video {
  width: 100%;
  height: 100%;
}
</style>
